<%--
  Created by IntelliJ IDEA.
  User: 86132
  Date: 2023/10/10
  Time: 11:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue的js--%>
    <script src="../../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../js/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="../../css/index.css">
</head>
<body>
<div id="app">
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :default-sort = "{prop: 'date', order: 'descending'}"
        >
            <el-table-column
                    prop="oper_id"
                    label="日志编号"
                    sortable
            >
            </el-table-column>
            <el-table-column
                    prop="business_type"
                    label="操作类型"
            >
            </el-table-column>
            <el-table-column
                    prop="oper_name"
                    label="操作人员"
            >
            </el-table-column>
            <el-table-column
                    prop="oper_url"
                    label="请求地址"
            >
            </el-table-column>
            <el-table-column
                    prop="oper_ip"
                    label="操作地址"
            >
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    sortable
            ><template slot-scope="scope">
                    <el-tag
                            type="success"
                            v-if="scope.row.status==1"
                            effect="dark">
                        启用
                    </el-tag>
                    <el-tag
                            type="danger"
                            v-if="scope.row.status==0"
                            effect="dark">
                        禁用
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="oper_time"
                    label="操作日期"
                    >
            </el-table-column>
        </el-table>
    </template>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 5, 10, 15]"
            :page-size=pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
</body>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            tableData:[],
            currentPage: 1,
            pageSize: 5,
            total: 1,
        },
        methods:{
            //初始化表格
            inittable(){
               axios.post("/role/logs?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize).then(resp=>{
                   this.tableData=resp.data.data.list;
                   this.total=resp.data.data.total;
               })
            },
            //    改变页面大小的函数
            handleSizeChange(val) {
                this.pageSize = val;
                this.inittable();
            },
            //    改变显示页码的函数
            handleCurrentChange(val) {
                this.currentPage = val;
                this.inittable();
            },
        },
        created(){
            this.inittable()
        },
    })
</script>
</html>
